<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第二种方式
        - 样式编写到head中的style标签里
           然后通过css的选择器来选中元素并为其设置各种样式
           可以同时为多个标签设置样式，并且修改一处即可
        -比内联样式更加方便对样式进行复用
        - 问题： 
           我们的内部样式只能对一个网页起作用，
           它里边的样式不能跨页面复用
        -->


        <!-- 第三种方式：（外部样式表） 最佳的开发样式
              - 可以将css样式编写到一个外部的css文件中，
                 然后通过link标签来引入外部的css文件
              - 外部样式表需要通过Link标签进行引用
                意味着只要想使用这些样式的网页都可以对其进行引用
                使样式可以在不同页面之间进行复用
              - 将样式编写到外部的css文件中，可以使用浏览器的缓存机制
                 从而加快网页的加载速度，提高用户的体验 -->
                <link rel="stylesheet" href="./style.css">
        <!-- <style>
            p{ 
                color: green;
                font-size: 60px;  

            }
        </style> -->
</head>
<body>
    <!-- 网页分为三个部分，
         结构（HTML）
         表现（CSS）
         行为（javascript） 
         css
            - 层叠样式表
            - 网页实际上是一个多层的结构，通过css可以分别为网页的每一个层来设置样式
                而最终我们能看到只是网页的最上边层
            - 总而言之，css用来设置网页中元素的样式
            -->
        <!-- 
            使用css来修改元素样式
            
            第一种方式(内联样式，行内样式)：
                - 在标签内部通过style属性来设置元素样式
                - 问题：
                   使用内联样式，样式对一个标签生效，
                     如果希望影响到多个元素必须在每一个元素都复制一遍
                     并且当样式发生变化时，我们必须一个一个·修改，非常不方便

                     - 注意： 开发时绝对别使用内联样式
                -->
        <p >少小离家老大回，乡音无改鬓毛催</p>

        <p >今天天气真不错</p>
        <p>落下预聚物起飞，秋水功郎天义色</p>
</body>
</html>